import React,{useContext,Component,createContext,useState} from 'react'
import {myContext} from './index'
const themeContext = createContext()
// class Son01 extends Component {
//     render() {
//         return (
//             <div>
//                <myContext.Consumer>
//                    { 
//                       value => <h1>{ value }</h1>
//                     }
//                </myContext.Consumer>
//             </div>
//         );
//     }
// }
class Son01 extends Component {
    static contextType = themeContext;
    render(){
        const theme = this.context
        console.log(require("./index"))

        return(
            <div>
               <h1>{theme}</h1>
            </div>
        )
    }
}
class Son02 extends Component {
    render(){
        return <Son01/>
    }
}

function Son() {
   const [theme,setTheme] = useState('黑色')
    return (
        <div>
            {/* 利用useContext读取context传递过来的数据 */}
           {/* {useContext(myContext)} */}
           <themeContext.Provider value={theme}>
            <Son02/>
           </themeContext.Provider>
        </div>
    )
}

export default React.memo(Son)
